<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
属性：float
值： left,right-->
<style>
    .p1{float: left;}
    .p2{float: right;}
</style>

<div>正常文字1</div>
<div>正常文字2</div>
<div class="p1">浮动的文字</div>
<div class="p2">浮动的文字</div>
<div>正常文字3</div>
<div>正常文字4</div>

<!--文字围绕图片-->
<style>
    #i1{
     float: left;   
    }
</style>

<div>
    <img id="i1" src="https://how2j.cn/example.gif">
    <p>当图片浮动时，文字围绕着图片</p>
    <p>当图片浮动时，文字围绕着图片</p>
    <p>当图片浮动时，文字围绕着图片</p>
    <p>当图片浮动时，文字围绕着图片</p>
    <p>当图片浮动时，文字围绕着图片</p>
</div>

<!--文字不想围绕图片-->
<!--不允许出现浮动元素
属性:clear
值: left right both none
如果p左边出现了浮动的元素，如此例，则设置clear:left 即达到不允许浮动元素出现在左边的效果-->
<style>
    #i2{float: left;}
    .p3{clear: left;}
</style>

<div>
    <img id="i2" src="https://how2j.cn/example.gif">
    <p class="p3">当图片浮动时，文字围绕着图片</p>
    <p class="p3">当图片浮动时，文字围绕着图片</p>
    <p class="p3">当图片浮动时，文字围绕着图片</p>
    <p class="p3">当图片浮动时，文字围绕着图片</p>
    <p class="p3">当图片浮动时，文字围绕着图片</p>
</div>

<!--水平排列div-->
<!--默认的div排列是会换行的
如果使用float就可以达到水平排列的效果，通常会用在菜单，导航栏等地方
如果超出了父容器，还会有自动换行的效果-->
<style>
    .f{width: 200px;}
    .d1{float: left;}
</style>

<div class="f">
    <div class="d1">菜单1</div>
    <div class="d1">菜单2</div>
    <div class="d1">菜单3</div>
    <div class="d1">菜单4</div>
    <div class="d1">菜单5</div>
    <div class="d1">菜单6</div>
</div>

</body>
</html>